<template>
  <view>
    <base-container>
      <view style="padding: 20rpx">
        <uni-forms ref="form" :border="true" :model="form" label-width="150">
          <uni-forms-item label="车牌号" name="vehicleId">
            <base-picker v-model="form.vehicleId" :localdata="vehicleList"/>
          </uni-forms-item>
          <uni-forms-item :rules="[{ required: true, errorMessage: '不能为空' }]" label="费用项目" name="itemId"
                          required>
            <base-picker v-model="form.itemId" :localdata="itemList"/>
          </uni-forms-item>
          <uni-forms-item :rules="[ { required: true, errorMessage: '不能为空' }, { pattern: /^\d{0,8}\.?\d{0,2}$/, errorMessage: '金额格式不正确' }  ]"
                          label="金额" name="amount" required>
            <uni-easyinput v-model="form.amount" :input-border="false" placeholder="请输入" type="digit"/>
          </uni-forms-item>
          <uni-forms-item label="日期" name="bookkeepingDate" required>
            <uni-datetime-picker v-model="form.bookkeepingDate" :border="false" :clear-icon="false"
                                 :input-border="false" type="date"/>
          </uni-forms-item>
          <uni-forms-item label="经办人" name="handler">
            <uni-easyinput v-model="form.handler" :input-border="false" placeholder="请输入" type="text"/>
          </uni-forms-item>
          <uni-forms-item label="结算人" name="settler">
            <uni-easyinput v-model="form.settler" :input-border="false" placeholder="请输入" type="text"/>
          </uni-forms-item>
          <uni-forms-item label-width="0" name="imgs">
            <base-images limit="3" title="上传图片(最多三张)" v-model="form.imgs"></base-images>
          </uni-forms-item>
          <uni-forms-item label="备注" name="remark">
            <uni-easyinput v-model="form.remark" :input-border="false" maxlength="400" placeholder="请输入"
                           type="textarea"/>
          </uni-forms-item>
        </uni-forms>
		<!-- <button class="main-btn" type="primary" @click="submit">提交</button> -->
		<view class="foot-Btn">
			<view class="btn" @click="submit">提交</view>
		</view>
      </view>
      <!-- <template #actions>
        <button class="main-btn" type="primary" @click="submit">提交</button>
      </template> -->
    </base-container>
  </view>
</template>

<script>
import {BookkeepingApi as Api} from "@/comms/api/bookkeepingApi";
import {Msg, toBack} from "@/utils/BaseUtils";
import BaseImages from "@/components/base-images/base-images.vue";

export default {
  components: {BaseImages},
  data() {
    return {
      params: {},
      form: {},
      itemShow: false,
      itemIndex: 0,
      itemList: [],
      vehicleList: []
    };
  },
  onLoad(params) {
    this.params = params;
    uni.setNavigationBarTitle({
      title: this.params.id ? '编辑记账' : "新增记账"
    });
  },
  mounted() {
    this.loadDate(this.params)
  },
  methods: {
    async loadDate({id}) {
      Msg.loading(async close => {
        await Promise.all([
          Api.bookkeepingItemList().then(({data}) => {
            this.itemList = (data || []).map(val => ({value: val.id, text: val.itemName}))
          }),
          Api.vehicleList().then(({data}) => {
            this.vehicleList = (data || []).map(val => ({value: val.id, text: val.licensePlate}))
          }),
        ]);
        if (id) {
          await Api.detail({id}).then(({data}) => this.form = {...data})
        }
        close?.();
      })
    },

    submit() {
      Msg.loading(close => {
        this.$refs.form.validate().then(async (valid) => {
          Api[this.form.id ? 'edit' : 'add'](this.convert())
              .then(res => {
                Msg.success("保存成功")
                setTimeout(() => toBack?.(), 1000)
              }).finally(() => close?.())
        }).catch(() => close?.())
      })
    },
    convert() {
      const {form: {vehicleId, itemId} = {}, vehicleList = [], itemList = []} = this;
      return {
        ...JSON.parse(JSON.stringify(this.form)),
        vehiclePlate: vehicleList.find(v => v.value == vehicleId)?.text,
        itemName: itemList.find(v => v.value == itemId)?.text,
      }
    }
  }
}
</script>

<style lang="scss">

</style>
